<template>
  <div>
    <el-dialog v-model="dialogFormVisible" :title="title" width="500" destroy-on-close :close-on-click-modal="closeOnClickModal">
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item label="菜单名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入菜单名称" clearable />
        </el-form-item>
        <el-form-item label="上级菜单" prop="pid" :label-width="formLabelWidth">
          <el-tree-select
            v-model="form.pid"
            :data="treeSelect"
            check-strictly
            :render-after-expand="false"
            :props="{ label: 'name', children: 'children', value: 'id'}"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="图标" prop="icon" :label-width="formLabelWidth">
          <el-input v-model="form.icon" autocomplete="off" placeholder="请输入图标" clearable />
        </el-form-item>
        <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
          <el-input-number v-model="form.sort" :min="0" placeholder="请输入排序"/>
        </el-form-item>
        <el-form-item label="权限标识" prop="code" :label-width="formLabelWidth">
          <el-input v-model="form.code" autocomplete="off" placeholder="请输入权限标识" clearable />
        </el-form-item>
        <el-form-item label="是否隐藏" prop="isHidden" :label-width="formLabelWidth">
          <el-switch
            v-model="form.isHidden"
            inline-prompt
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item label="菜单类型" prop="type" :label-width="formLabelWidth">
          <el-select
            v-model="form.type"
            placeholder="菜单类型"
            clearable
            style="width: 192px"
          >
            <el-option
              v-for="item in menuTypes"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveOrUpdate">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import { tableList, saveOrUpdate, getInfo } from '~/api/acl/permission'

  const dialogFormVisible = ref(false)
  const formLabelWidth = '80px'
  const title = ref('新建菜单')
  const closeOnClickModal = ref(false)
  const formRef = ref(null)
  const treeSelect = ref([])

  const emit = defineEmits(['refreshDataList'])

  const menuTypes = [
    { type: 1, name: '目录', tagType: 'primary' },
    { type: 2, name: '菜单', tagType: 'success' },
    { type: 3, name: '按钮', tagType: 'info' }
  ]

  const form = reactive({
    id: 0,
    pid: '',
    name: '',
    icon: '',
    code: '',
    type: '',
    sort: 0,
    isHidden: false
  })

  const rules = {
    name: [
      { required: true, message: '菜单名称不能为空!', trigger: 'blur' }
    ],
    code: [
      { required: true, message: '权限标识不能为空!', trigger: 'blur' }
    ],
    type: [
      { required: true, message: '菜单类型不能为空!', trigger: 'blur' }
    ],
    pid: [
      { required: true, message: '上级菜单不能为空!', trigger: 'blur' }
    ],
    isHidden: [
      { required: true, message: '是否隐藏不能为空!', trigger: 'blur' }
    ]
  }

  // 初始化数据
  function init(id) {
    dialogFormVisible.value = true
    // 查询所有菜单
    loadMenu()
    if(!id) {
      // 新建
      title.value = '新建菜单'
      form.id = 0
      form.pid = ''
      form.name = ''
      form.icon = ''
      form.code = ''
      form.type = ''
      form.sort = 0
      form.isHidden = false
    } else {
      // 修改
      title.value = '修改菜单'
      form.sort = 0
      // 通过id查询用户信息
      queryPermissionInfo(id)
    }
  }
  // 通过id查询菜单信息
  function queryPermissionInfo(id) {
    getInfo(id).then(res => {
      if(res && res.data.code === 200) {
        const data = res.data.data
        form.id = data.id
        form.pid = data.pid
        form.name = data.name
        form.icon = data.icon
        form.code = data.code
        form.type = data.type
        form.sort = data.sort
        form.isHidden = data.isHidden
      }
    })
  }
  function loadMenu() {
    tableList().then(res => {
      if(res && res.data.code === 200) {
        treeSelect.value = res.data.data
      }
    })
  }
  // 确认
  function handleSaveOrUpdate() {
    formRef.value.validate((valid) => {
      if(!valid) {
        return false
      }
      saveOrUpdate(form).then(res => {
        if(res && res.data.code === 200) {
          dialogFormVisible.value = false
          emit('refreshDataList')
        }
      })
    })
  }

  // 将方法暴露给父组件
  defineExpose({
    init
  })
</script>

<style></style>
